import React, { createRef } from "react";
import { Card, Row, Col, Table, message, Modal, Button, Badge, Form, Input, Select } from "antd";
import { FormComponentProps } from "antd/es/form/Form"; //获取Form表单的interface
import { FormItemProps } from "antd/lib/form/FormItem";
import { ColumnProps, SortOrder } from "antd/es/table";
import { PaginationConfig } from "antd/es/pagination/Pagination";
import { TableRowSelection, SorterResult } from "antd/es/table/interface";
import AJAX, { AJAXResponseConfig, AJAXRequestConfig } from "../../ajax/ajaxServer";
import { formatCarMode, formatOperationMode, formatAuthStatus, formatCityAdmins } from "../../utils/tools";
import { getPaginationConfig } from "../../utils/utils";
import { ResponseResult, CityInfo } from "../../utils/interface";
import { CityName, CarMode, OperationMode, AuthStatus } from "../../config/selectConfig";
import "./index.less";

const FormItem = Form.Item;
const Option = Select.Option;

interface IProps {}

interface IStates {
	customData: Array<CityInfo>;
	paginationConfig: PaginationConfig;
	isOpenCityModal: boolean;
}

class CityPage extends React.Component<IProps, IStates> {
	paramConfig: any;

	// 这里的类型有bug
	// formRef = createRef<FormComponentProps>();
	formRef = createRef<any>();

	constructor(props: IProps, state: IStates) {
		super(props, state);
		this.state = {
			customData: [],
			paginationConfig: {},
			isOpenCityModal: false
		};
	}

	componentDidMount() {
		this.requestStandardDatas();
	}

	requestStandardDatas() {
		let config: AJAXRequestConfig = {
			url: "/api/city",
			params: this.paramConfig
		};
		AJAX.standardDataAPI<CityInfo>(config).then(res => {
			this.setState({
				customData: res.lists,
				paginationConfig: getPaginationConfig(res, (page: number, pageSize?: number) => {
					this.paramConfig.page = page;
					this.requestStandardDatas();
				})
			});
		});
	}

	handleOpenCity = () => {
		// Modal.confirm({
		// 	title: "开通城市"
		// });
		this.setState({
			isOpenCityModal: true
		});
	};

	modalHandlesubmit = () => {
		// '!' 使用非空断言 , 表示form这个属性一定存在
		let cityInfo = this.formRef.current.props!.form.getFieldsValue();

		let config: AJAXRequestConfig = {
			url: "/api/city/upDate",
			params: cityInfo
		};
		AJAX.standardDataAPI<CityInfo>(config).then(
			res => {
				this.setState({
					customData: res.lists,
					paginationConfig: getPaginationConfig(res, (page: number, pageSize?: number) => {
						this.paramConfig.page = page;
					}),
					isOpenCityModal: false
				});
				this.requestStandardDatas();
				message.success("开通成功");
			},
			reason => {
				message.success("开通失败");
			}
		);
	};

	render() {
		const customColumns: Array<ColumnProps<CityInfo>> = [
			{
				title: "城市ID",
				dataIndex: "id"
			},
			{
				title: "城市名称",
				dataIndex: "cityName"
			},
			{
				title: "用车模式",
				dataIndex: "mode",
				render: formatCarMode
			},
			{
				title: "运营模式",
				dataIndex: "op_mode",
				render: formatOperationMode
			},
			{
				title: "授权加盟商",
				dataIndex: "franchisee_name"
			},
			{
				title: "授权状态",
				dataIndex: "auth_status",
				render: formatAuthStatus
			},
			{
				title: "城市管理员",
				dataIndex: "city_admins",
				render: formatCityAdmins
			},
			{
				title: "城市开通时间",
				dataIndex: "open_time"
			},
			{
				title: "操作时间",
				dataIndex: "update_time"
			}
		];

		return (
			<div>
				<Card>
					<Row>
						<Col span={24}>
							<FilterForm></FilterForm>
						</Col>
					</Row>
				</Card>
				<Card>
					<Row>
						<Col span={24} style={{ marginBottom: "8px" }}>
							<Button type={"primary"} onClick={this.handleOpenCity}>
								开通城市
							</Button>
						</Col>
					</Row>
					<Row>
						<Col span={24}>
							<Table columns={customColumns} dataSource={this.state.customData} pagination={this.state.paginationConfig} rowKey={record => `${record.id}`}></Table>
						</Col>
					</Row>
				</Card>
				<Modal
					title="开通城市"
					width={"400px"}
					visible={this.state.isOpenCityModal}
					onCancel={() => {
						this.setState({
							isOpenCityModal: false
						});
					}}
					onOk={this.modalHandlesubmit}
				>
					<ModalForm wrappedComponentRef={this.formRef}></ModalForm>
				</Modal>
			</div>
		);
	}
}

export default CityPage;

class FormGroup extends React.Component<IProps & FormComponentProps> {
	render() {
		const { getFieldDecorator } = this.props.form;

		return (
			<Form layout="inline">
				<FormItem label="城市">
					{getFieldDecorator("city_id", {
						rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "120px" }}>
							{CityName.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem label="用车模式">
					{getFieldDecorator("mode", {
						rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "120px" }}>
							{CarMode.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem label="营运模式">
					{getFieldDecorator("op_mode", {
						rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "120px" }}>
							{OperationMode.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem label="加盟商授权状态">
					{getFieldDecorator("auth_status", {
						rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "120px" }}>
							{AuthStatus.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem>
					<Button type="primary" style={{ margin: "0 20px" }}>
						查询
					</Button>
					<Button>重置</Button>
				</FormItem>
			</Form>
		);
	}
}
const FilterForm = Form.create()(FormGroup);

class ModalFormGroup extends React.Component<IProps & FormComponentProps> {
	render() {
		const { getFieldDecorator } = this.props.form;
		const formItemLayout: FormItemProps = {
			labelCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 6
				}
			},
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 4
				}
			}
		};
		const offsetLayout: FormItemProps = {
			wrapperCol: {
				xs: {
					span: 24
				},
				sm: {
					span: 4,
					offset: 2
				}
			}
		};
		return (
			<Form layout="horizontal">
				<FormItem label="城市" {...formItemLayout}>
					{getFieldDecorator("city_id", {
						// rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "180px" }}>
							{CityName.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem label="用车模式" {...formItemLayout}>
					{getFieldDecorator("mode", {
						// rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "180px" }}>
							{CarMode.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
				<FormItem label="营运模式" {...formItemLayout}>
					{getFieldDecorator("op_mode", {
						// rules: [{}]
					})(
						<Select placeholder="全部" style={{ width: "180px" }}>
							{OperationMode.map((item, index) => (
								<Option value={item.value} key={index}>
									{item.label}
								</Option>
							))}
						</Select>
					)}
				</FormItem>
			</Form>
		);
	}
}
const ModalForm = Form.create()(ModalFormGroup);
